<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>提醒事项</title>
		<script src="js/vue.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				box-sizing: border-box;
			}
			body {
				font-family: 'Roboto', sans-serif;
				background-color: #f0f2f5;
				color: #333;
			}
			#contain {
				margin: 50px auto;
				padding: 20px;
				width: 400px;
				border: 1px solid #ccc;
				border-radius: 8px;
				display: flex;
				flex-direction: column;
				background-color: #ffffff;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			}
			h2 {
				text-align: center;
				margin-bottom: 20px;
			}
			.item {
				display: flex;
				align-items: center;
				margin-bottom: 15px;
			}
			.item span {
				margin-right: 10px;
				font-weight: bold;
			}
			.item input {
				flex-grow: 1;
				padding: 8px;
				border: 1px solid #ccc;
				border-radius: 4px;
				font-size: 16px;
				transition: border-color 0.3s, box-shadow 0.3s;
			}
			.item input:focus {
				outline: none;
				border-color: #007bff;
				box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
			}
			.item button {
				padding: 8px 12px;
				border: none;
				border-radius: 4px;
				background-color: #007bff;
				color: white;
				cursor: pointer;
				transition: background-color 0.3s;
				margin-left: 5px;
			}
			.item button:hover {
				background-color: #0056b3;
			}
			#content {
				background-color: #f9f9f9;
				padding: 10px;
				border-radius: 4px;
			}
			li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px;
				border-bottom: 1px solid #ddd;
			}
			li:last-child {
				border-bottom: none;
			}
			li span:first-child {
				margin-right: 10px;
				font-weight: bold;
			}
			li span:nth-child(2) {
				flex-grow: 1;
			}
			#btn-right {
				display: flex;
				gap: 5px;
				align-items: center;
			}
			#btn-right button {
				padding: 5px 10px;
				border: none;
				border-radius: 4px;
				background-color: #dc3545;
				color: white;
				cursor: pointer;
				transition: background-color 0.3s;
			}
			#btn-right button:hover {
				background-color: bule;
			}
			#btn-right button:nth-child(2) {
				background-color: bule;
			}
			#btn-right button:nth-child(2):hover {
				background-color: #e0a800;
			}
			#btn-right button:nth-child(3) {
				background-color: #28a745;
			}
			#btn-right button:nth-child(3):hover {
				background-color: #218838;
			}
			#btn-right button:disabled {
				background-color: #6c757d;
				cursor: not-allowed;
				opacity: 0.6;
			}
			.list-move,
			.list-enter-active,
			.list-leave-active {
				transition: all 1s ease;
			}
			.list-enter-from {
				transform: translateX(30px);
			}
			.list-leave-to {
				opacity: 0;
				transform: translateX(30px);
			}
			.list-leave-active {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="contain">
				<h2>提醒事项</h2>
				<div class="item">
					<span>内容</span>
					<input type="text" v-model="newContent" id="newContent">
					<button id="pull" @click="addItem">添加</button>
				</div>
				<transition-group name="list" tag="ul" id="content">
					<li v-for="(item, index) in list" :key="item">
						<span>{{ index + 1 }}</span>
						<span>{{ item }}</span>
						<div id="btn-right">
							<button v-if="index > 0" @click="moveUp(index)">上移</button>
							<button v-else disabled>上移</button>
							<button v-if="index < list.length - 1" @click="moveDown(index)">下移</button>
							<button v-else disabled>下移</button>
							<button @click="removeItem(index)">删除</button>
						</div>
					</li>
				</transition-group>
			</div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						newContent: "",
						list: [
							"吃吃", "打豆豆", "学习"
						]
					}
				},
				methods: {
					addItem() {
						if (this.newContent.length <= 0) {
							alert('请输入内容');
						} else {
							this.list.push(this.newContent);
							this.newContent = "";
						}
					},
					removeItem(index) {
						this.list.splice(index, 1);
					},
					moveDown(index) {
						if (index < this.list.length - 1) {
							[this.list[index], this.list[index + 1]] = [this.list[index + 1], this.list[index]];
						}
					},
					moveUp(index) {
						if (index > 0) {
							[this.list[index], this.list[index - 1]] = [this.list[index - 1], this.list[index]];
						}
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>
